<!-- Vue3 语法 -->
<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>
<script>
export default {
  name: "Person",
  setup() {
    /**
     * setup中this是undefined,Vue3已经开始弱化this.
     * 数据, 原来是写在data中的此时的name,age,tel都不是响应式的数据.
     * ---
     * data,methods 可以和setup同时存在.
     * data可以读取到setup中的数据,但是需要使用`this`.
     */
    let name = "张三"; // 此时 name 不是响应式
    let age = 18; // 此时 age 不是响应式
    let tel = "13888888888"; // 此时 tel 不是响应式

    // 方法
    function changeName() {
      // 注意: 这样修改name,页面没有变化,name确实改了,但name不是响应式的
      name = "zhang-san";
    }
    function changeAge() {
      // 注意: 这样修改age,页面没有变化,age确实改了,但age不是响应式的
      age += 1;
    }
    function showTel() {
      alert(tel);
    }
    // 定义的属性和方法需要使用这里进行交出,模板中才可以使用.
    return { name, age, changeName, changeAge, showTel };
    // setup的返回值也可以是一个渲染函数.
    // return () => "哈哈";
  },
};
</script>

<style>
button {
  margin: 0 5px;
}
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>
